<template>
    <div class="home">
        <!-- El轮播图  -->
        <section class="banner">
            <el-carousel height="450px">
                <el-carousel-item v-for="item in Banner.list" :key="item.id" class="item">
                    <img :src="baseURL + item.pic" alt="">
                </el-carousel-item>
            </el-carousel>
        </section>
        <!-- 精选列表 -->
        <section class="list">
            <Title>为您精选</Title>
            <ScrollX>
                <Card v-for="item in Hot.list" :key="item.id" :data="item"></Card>
            </ScrollX>
        </section>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import Title from '@/components/Title.vue'
import ScrollX from '@/components/ScrollX.vue'
import Card from '@/components/Card.vue'
import { goodsTop, getBanner } from '@/api/book'
import { baseURL } from '@/config/baseURL'

//Banner
const Banner = reactive({
    list: []
})

//Hotgoods
const Hot = reactive({
    list: []
})

const getHotList = () => {
    goodsTop({ count: 10 }).then(res => {
        if (res.data.code === 200) {
            Hot.list = res.data.goods
        }
    })
}

//初始化时调用接口
getHotList()

//获取轮播图
getBanner().then(res => {
    if (res.data.code === 200) {
        Banner.list = res.data.banner
    }
})

</script>

<style scoped lang='less'>
.banner {

    margin-top: 10px;

    .item {
        width: 1200px;
        height: 450px;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
            min-width: 100%;
            min-height: 100%;
            object-fit: cover;
        }
    }
}

.list {
    margin-top: 40px;
}
</style>